Использование языка сценариев JavaScript
В сети Интернет
размещено огромное количество сценариев обработки HTML-документов, как очень
простых, так и достаточно сложных. Среди них значительную часть составляют
программы, написанные на языке JavaScript. Цель данного параграфа -
рассмотреть некоторых из них и научить вас использовать их на своих
HTML-страничках.
Программы на языке
программирования JavaScript часто называют сценариями или скриптами.
По сути они представляют собой набор инструкций по управлению браузером. Код
программы размещается непосредственно в HTML-документе или в виде отдельного
файла.
Скрипты могут
находится в любом месте HTML-документа. Однако между строчками кода
JavaScript-программы нельзя помещать теги языка HTML. Поэтому чаще всего
скрипт размещают внутри раздела <HEAD> документа. Сама
JavaScript-программа размещается между тегами <SCRIPT> ... </SCRIPT>. Встретив тег <SCRIPT>, браузер
построчно анализирует содержимое документа до тех пор, пока не
будет достигнут тег </SCRIPT>. После этого проводится проверка скрипта
на наличие ошибок и компиляция программы в формат, пригодный для
использования в данном браузере. Не все браузеры понимают код JavaScript,
поэтому полезно заключать весь код сценария в комментарии (<!- и //->)
Для размещения
текста программы внутри HTML-документа используют конструкцию
<SCRIPT LANGUAGE="JavaScript"> <!- ... здесь располагается код программы ... //-> </SCRIPT>
Программы на языке
JavaScript можно размещать и в виде отдельных текстовых файлов, имеющих
расширение .js. Для подключения такого сценария используется
параметр SRC тега <SCRIPT>, содержащий
абсолютный URL файла, из которого загружается сценарий. Адрес URL может быть
и относительным, задавая, например, скрипт, расположенный в том же каталоге,
что и текущий HTML-документ:
<SCRIPT SCR="myScript.js"> </SCRIPT>
Кроме этого, для
работы программы в "теле" HTML-документа могут содержаться
конструкции кода, позволяющие начать выполнение программы. Дело в том, что
мало разместить в правильном месте код сценария, даже правильно написанный,
необходимо еще дать команду браузеру для запуска программы.
Пример
Рассмотрим
HTML-файл со сценарием на языке JavaScript, который отображает текущее время.
<HTML> <HEAD> <TITLE>Электронные часы</TITLE> <!- <SCRIPT LANGUAGE="JavaScript"> function clock_form() { day=new Date() clock_f=day.getHours()+":"+ day.getMinutes()+":"+ day.getSeconds() document.form.f_clock.value=clock_f id=setTimeout("clock_form()",100) } //-> </SCRIPT> </HEAD> <BODY onLoad="clock_form()"> <FORM NAME="form"> Московское время: <INPUT NAME="f_clock" SIZE="8"> </FORM> </BODY> </HTML>
В этом примере для запуска сценария
используется конструкция onLoad = "clock_form()", размещенная в качестве атрибута тега <BODY>. Для вывода показаний часов
используется элемент <FORM>...</FORM>, размером в 8 символов.
Пример
Следующий скрипт
создает "бегущую строку" в окне браузера. Для изменения скорости
вывода информации используется переменная speed, текст строки
задается в переменной line.
<HTML> <HEAD> <TITLE>Бегущая строка</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript"> <!- var line="Центр Компьютерных Технологий"; var speed=200; var i=0; function m_line() { if(i++<line.length) { document.form.ctc.value=line.substring(0,i); } else{ document.form.ctc.value=" "; i=0; } setTimeout('m_line()',speed); } //-> </SCRIPT> <BODY onload="m_line()"> <CENTER> <FORM NAME="form"> <INPUT TYPE="text" SIZE="30" NAME="ctc"> </FORM> </CENTER> </BODY> </HTML>
|